<template>
    <div id="majorMapBox">
        <div id="majorMap"></div>
        <div class="majorMap_contor">
            <div class="majorMap_add" @click="search" title="搜索机场" style="margin-bottom: 15px">&#xe691;</div>
            <div class="majorMap_add" @click="majorMap1">&#xe60d;</div>
            <div class="majorMap_add" @click="majorMap0">&#xe60e;</div>
        </div>
        <div class="airlineBack" v-if="mapState==1" @click="returnRoute();clearAll();closeAddress()">&#xe68a;</div>
    </div>
</template>
<script>
    import * as vx from 'vuex'
    import bus from '../nationSearch/eventBus'  //搜索中间件
    let mapBox,myChart;
    export default{
        data(){
            return{
                pData:'',
                air:true,
                AllLines: null,
                mapChangeFlag: true
            }
        },
        mounted(){
            let _this = this;
            _this.droMap();
            bus.$on("changeMap", function (data) {
                if(data === true){//初始回全国航线
                    _this.mapData.series = JSON.parse(_this.AllLines);
                }else{//展示搜索航线
                    let series = _this.mapData.series[0];
                    series.name = '搜索航线';
                    series.data = data.line;
                    series.lineStyle.normal.width = 2.4;
                    series.lineStyle.emphasis.width = 4;
                    series.tooltip = {
                        show : true,
                        formatter: (p)=>{
                            return p.data.fromName + '-' + p.data.toName;
                        }
                    };
                    _this.mapData.series.length = 1;
                    _this.mapData.series.push(data.dot);
                }
            })
        },
        methods:{
            ...vx.mapActions([
                'majorMap1',
                'majorMap0',
                'returnRoute',
                'clearAll',
            ]),
            search(){
                bus.$emit("searchAir");
            },
            mapFlagChange:function () {
                this.mapChangeFlag = false;
                setTimeout(()=>{
                    this.mapChangeFlag = true;
                },1500)
            },
            droMap:function () {
                let that = this;
                if(this.menuc.head.CNtext === ''){return false;}
                let mapBox = document.getElementById("majorMap");
                myChart = echarts.init(mapBox);
                var isCJadmin = this.menuc.head.CNtext === '太美集团'?true:false;
                if(isCJadmin){  //屏蔽航线，屏蔽重点机场
                    this.mapData.series[0].data.length = 0;
                    if(this.mapData.series[1].name ==='全国重点机场')this.mapData.series[1].data.length = 0;
                    $('.acc_diagram').hide();
                }
                this.mapData.tooltip.formatter = function (p) {
                    if(p.seriesType === 'lines'){
                        return p.data.fromName+'-'+p.data.toName
                    }
                    return p.seriesName
                }
                myChart.setOption(this.mapData, false);
                myChart.on("click", function (params) {
                    if (params.data.typeScatter == 1) {
                        location.href = "indexd?" + "itia=" + params.data.code;
                    }
                });
                if(!isCJadmin){
                    myChart.on("mouseover", (p) => {
                        if (p.seriesType == 'scatter' && p.seriesName == '核心机场') {
                            if(that.mapChangeFlag) {
                                that.mapFlagChange();
                                if (that.mapData.series.length > 3) {
                                    that.mapData.series.length = 3;
                                }
                                let data = {
                                    "coordinateSystem": "bmap",
                                    "type": "lines",
                                    "zlevel": 0,
                                    "effect": {
                                        "show": true,
                                        "period": 10,
                                        "trailLength": 0,
                                        "symbol": "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-…5.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z",
                                        "color": "#7fbce9",
                                        "symbolSize": 8
                                    },
                                    "lineStyle": {
                                        "normal": {
                                            "color": "#d85230",
                                            "width": 0.8,
                                            "opacity": 0.4,
                                            "curveness": 0.2
                                        }
                                    },
                                    "polyline": false,
                                    "data": this.all_line[p.data.code]
                                };
                                return that.mapData.series.push(data);
                            }
                        }else{
                            if (that.mapData.series.length > 3) {
                                that.mapData.series.length = 3;
                            }
                        }
                    });
                    myChart.on("mouseout", (p) => {
                        if (that.mapData.series.length > 3) {
                            that.mapData.series.length = 3;
                        }
                    });
                }
                window.vuemapDom = myChart;
            },
            closeAddress:function () {
                window.location.hash='';
            }
        },
        watch:{
            mapData: {
                handler: function(val,oval){
                    if(val.series[0].name === '全国航线'){
                        this.AllLines = !!this.AllLines ? this.AllLines : JSON.stringify(this.mapData.series);
                    }
                    if(myChart != null)myChart.dispose();
                    this.droMap();
                },
                deep: true
            }
        },
        computed:{
            ...vx.mapGetters([
                'menuc',
                'mapData',
                'mapState',
                'all_line'
            ])
        }
    }
</script>
<style>

</style>